<template>
  <div class="orgnazition-show">

    <!-- 查询条件-->
    <el-form :inline="true" :model="searchData" class="filter-form">
      <el-row :gutter="10">
        <el-col :span="3">
          <el-input placeholder="请输入医生姓名" v-model="searchData.docterName"></el-input>
        </el-col>
        <el-col :span="3">
            <el-select v-model="searchData.orgId" class="form-select" placeholder="请选机构"
              @click.native.prevent="getOrg">
              <el-option v-for="item in orgs" :key="item.orgId" :label="item.orgName" :value="item.orgId">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="3">
            <el-select v-model="searchData.docterTeamId" class="form-select" placeholder="请选团队"
              @click.native.prevent="getTeam">
              <el-option v-for="item in teams" :key="item.docterTeamId" :label="item.docterTeamName" :value="item.docterTeamId">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="primary" icon="el-icon-refresh-right" @click="reSearch()">重置</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-refresh-right" @click="addDocter()">新增机构</el-button>
        </el-col>
      </el-row>
    </el-form>
    </br>

    <!-- 加边框 -->
    <el-table :data="tableData" height="800" style="width: 100%">
      <el-table-column fixed prop="docterId" label="医生ID" width="150" align="center">
      </el-table-column>
      <el-table-column prop="docterNumber" label="医生编号" width="120">
      </el-table-column>
      <el-table-column prop="docterAvator" label="医生头像" width="120">
        <!-- 自定义单元格模板 -->
        <template slot-scope="scope">
          <div class="avatar-container">
            <img :src="scope.row.docterAvator" class="org-avatar-img" :alt="scope.row.orgName"></img>
          </div>

        </template>
      </el-table-column>
      <el-table-column prop="docterName" label="医生名称" width="80" align="center">
      </el-table-column>
      <el-table-column prop="docterGender" label="性别" width="50" align="center">
      </el-table-column>
      <el-table-column prop="docterTeamName" label="所属团队" width="150" align="center">
      </el-table-column>
      <el-table-column prop="orgName" label="所属机构" width="150" align="center">
      </el-table-column>
      <el-table-column prop="docterPhone" label="联系电话" width="210" align="center">
      </el-table-column>
      <el-table-column prop="docterTagName" label="医生类型" width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.docterTagName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="docterGood" label="医生擅长" width="210">
      </el-table-column>
      <el-table-column prop="docterDesc" label="医生简介" width="410">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteDocter(scope.row)" type="button" size="small">
            移除
          </el-button>
          <el-button @click.native.prevent="updateRow(scope.row)" type="button" size="small">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchData.pageNo" :page-sizes="[6,8]" :page-size="searchData.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      searchData: {
            "docterAvator": "",
            "docterDesc": "",
            "docterGood": "",
            "docterId": 0,
            "docterName": "",
            "docterNumber": 0,
            "docterPassword": "",
            "docterPhone": "",
            "docterRoleId": 0,
            "docterRoleName": "",
            "docterTagId": 0,
            "docterTeamId": "",
            "docterTeamName": "",
            "orgName": "",
            "orgId": "",
            "pageNo": 1,
            "pageSize": 8,
        },
        orgs:[],
        teams:[]
    }
  }, created() {
    this.initTabeData()
  }, methods: {
    handleSizeChange(val) {
      this.searchData.pageSize = val
      // this.searchData.pageNo = 1
      this.initTabeData()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchData.pageNo = val
      this.initTabeData()
      console.log(`当前页: ${this.searchData.pageNo}`);
    },
    initTabeData() {
      console.log("查询条件：" + JSON.stringify(this.searchData))
      axios.post("/api/docter/findList", this.searchData).then(res => {
        this.tableData = res.data.data.records
        console.log("查询结果：" + JSON.stringify(res.data.data.records))
        this.searchData.pageNo = res.data.data.current
        console.log("当前页码" + res.data.data.current)
        this.searchData.pageSize = res.data.data.size
        console.log("每页显示条数" + res.data.data.size)
        this.total = res.data.data.total
      })
    },
    deleteDocter(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("/api/docter/deleteDocter?docterId="+row.docterId).then(res => {
          this.$message({
            type: 'info',
            message: '删除成功!'
          });
          router.go(0)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateRow(row) {
      this.form = row
      this.form.title = '编辑医生'
      this.$router.push(
        {
          path: '/addDocter',
          query:{...this.form}
        }
      )
    },search() {
      this.searchData.pageNo = 1
      this.initTabeData()
    }, reSearch() {
      this.searchData = {
            "docterAvator": "",
            "docterDesc": "",
            "docterGood": "",
            "docterId": 0,
            "docterName": "",
            "docterNumber": 0,
            "docterPassword": "",
            "docterPhone": "",
            "docterRoleId": 0,
            "docterRoleName": "",
            "docterTagId": "",
            "docterTeamId": "",
            "docterTeamName": "",
            "docterTeamId": "",
            "orgName": "",
            "orgId": "",
            "pageNo": 1,
            "pageSize": 8,
        }
      this.initTabeData()
    }, addDocter() {
      //清空表单
      this.form = {
        "docterId": 0,
        "docterName": "",
        "docterNumber": 0,
        "docterPhone": "",
        "docterTeamId": "",
        "docterTeamName": "",
        "orgAddress": "",
        "orgName": "",
        "orgNumber": 0,
        "orgState": 1,
        "title": "添加医生"
      }

      this.$router.push(
        {
          path: '/addDocter',
          query:{...this.form}
        }
      )
    },getOrg(){
      axios.get("/api/docter/findIdAndName").then(res => {
        this.orgs = res.data.data
      })
    },getTeam(){
      axios.get("/api/docter/findTeamList").then(res => {
        try {
          this.teams = res.data.data
        } catch (error) {
            console.log(error)
        }
      })
    }
  }


}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.orgnazition-show {
  margin-top: 20px;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 1. 头像外层容器：控制整体尺寸，居中对齐 */
.avatar-container {
  width: 50px;
  /* 容器宽度 = 头像宽度，避免图片溢出 */
  height: 50px;
  /* 容器高度 = 头像高度，保持正方形比例 */
  margin: 0 auto;
  /* 水平居中，适配表格单元格 */
  border-radius: 4px;
  /* 轻微圆角，视觉更柔和（可选） */
  overflow: hidden;
  /* 裁剪超出容器的图片（防止变形） */
  background-color: #f5f5f5;
  /* 图片加载前的背景色，避免空白 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. 头像图片：核心尺寸控制，保持比例 */
.org-avatar-img {
  width: 100%;
  /* 图片宽度充满容器 */
  height: 100%;
  /* 图片高度充满容器 */
  object-fit: cover;
  /* 关键：保持图片比例，裁剪多余部分（避免拉伸变形） */
  object-position: center;
  /* 图片居中显示（优先展示主体） */
  transition: all 0.3s;
  /* hover时的过渡动画，提升交互感 */
}
</style>